<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>剖切</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player"></div>

      <div class="control">
        <div class="params">
          <div class="item">
            <div class="btn-tab">
              <div :class="{ 'btn-item': true, active: options.type == item }" @click="typeChang(item)" v-for="(item, index) in typeList" :key="index">{{ item }}</div>
            </div>
          </div>
          <div class="item">
            <div class="label">反向剖切</div>
            <div class="content">
              <input type="checkbox" v-model="options.isReverseCut" :disabled="options.type == '面剖切'" @change="isReverseCutChange" />
            </div>
          </div>

          <div class="button-box">
            <div class="btn" @click="start()">开始分析</div>
            <div class="btn stop" @click="stop()">停止分析</div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, reactive, onMounted } = Vue

      // 分析状态，true为正在分析，false则没有进行分析
      let mousepickupState = false

      const vueComposition = {
        setup() {
          const typeList = ['面剖切', '体剖切', '多边形剖切']

          const options = reactive({
            location: [0, 0, 0],
            coordinates: [],
            type: '面剖切',
            isReverseCut: false // 反向剖切
          })

          const typeChang = type => {
            stop()
            options.type = type
          }
          /**
           * 开始分析
           */
          const start = async () => {
            if (options.type == '多边形剖切') {
              await __g.editHelper.setParam(1, 1)
              await __g.editHelper.start()
              alert('鼠标左键开始绘制，鼠标中键结束绘制')
            } else {
              mousepickupState = true
            }
          }

          const analyse = () => {
            console.log('开始分析', options)
            switch (options.type) {
              case '面剖切':
                __g.tools.startPlaneClip(options.location, [0, 0, 0], true, true)
                break
              case '体剖切':
                __g.tools.startVolumeClip(getBboxByLocation(options.location, 200), options.isReverseCut ? 1 : 0, true, true)
                break
              case '多边形剖切':
                __g.tools.startPolygonClip(options.coordinates, options.isReverseCut)
                break

              default:
                break
            }
          }

          /**
           * 停止分析
           */
          const stop = () => {
            // 关闭分析
            __g.tools.stopPlaneClip()
            __g.tools.stopClip()
            __g.tools.stopVolumeClip()
          }

          const getBboxByLocation = (location, distance) => {
            return [...[location[0] - distance, location[1] - distance, location[2] - distance], ...[location[0] + distance, location[1] + distance, location[2] + distance]]
          }

          onMounted(() => {
            const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
              domId: 'player',
              apiOptions: {
                // onReady: function () {
                //   fdapi.reset(2 | 4)
                // }
                onEvent: function (event) {
                  const eventType = event.eventtype
                  console.log('onEvent', event)

                  if (mousepickupState) {
                    options.location.length = 0
                    options.location.push(...event.MouseClickPoint)
                    mousepickupState = false

                    analyse()
                  }
                }
              },
              actionEventHander: {
                // 鼠标按下
                onmousedown: async e => {
                  console.log(e)
                  if (e.button == 1) {
                    const res = await __g.editHelper.finish(true)
                    switch (res.buildType) {
                      case 0:
                        break
                      case 1:
                        res.coordinates.push(res.coordinates[0])
                        options.coordinates = res.coordinates
                        analyse()
                        break
                    }
                  }
                }
              }
            })
          })

          return {
            typeList,
            options,
            typeChang,
            start,
            stop
          }
        }
      }

      const app = createApp(vueComposition).mount('#app')

      const clearLayer = () => {
        fdapi.geoJSONLayer.clear()
      }

      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
